<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import { ref, defineProps } from 'vue'
import { onReady, onLoad } from '@dcloudio/uni-app'
import StepsContainer from '@/components/attendanceComponents/index.vue'
import dayjs from 'dayjs'
import { getListYiChangApi, getStatistics } from '@/api/attendance'
import SmallCard from '@/components/attendanceComponents/SmallCard.vue'

const userInfo = ref(null)
const time = ref(null)
const props = defineProps({
  title: {
    type: String,
    default: '',
    required: true,
  },
})

const personalContent = ref([
  {
    num: 0,
    title: '出勤天数',
  },
  {
    num: 0,
    title: '迟到',
  }, {
    num: 0,
    title: '请假',
  },
  {
    num: 0,
    title: '缺卡',
  },
])
const rightIcon = () => {
  uni.switchTab({
    url: '/pages/index',
  })
}

const curDate = ref(dayjs())
// 标记的集合
const markDays = ref([])
const ren = ref()
onReady(() => {
  console.log(curDate.value,'curDatecurDate111')
  let today = ren.value.getToday().date
  curDate.value = today
  console.log(curDate.value,'curDatecurDate222')
  markDays.value.push(today)
})
// 点击的日期
const onDayClick = (data) => {
  curDate.value = data.date
}

const monthlyStatisticsFn = () => {
  uni.navigateTo({ url: '/pages/attendance/statisticPage/monthlyStatistics?startDate='+time.value.startDate })
}
const getStatisticsFn = async (groupId = 0) => {
  let params = {
    groupId: groupId, // 考勤组0  个人1
    statisticsDateLte: dayjs(time.value.startDate).format('YYYY-MM-DD 00:00:00'),
    statisticsDateGte: dayjs(time.value.endDate).format('YYYY-MM-DD 23:59:59'),
  }
  let { code, data } = await getStatistics(params)
  if (code === 200) {
    personalContent.value.forEach((v) => {
      switch (v.title) {
        case '外勤':
          v.num = data.fieldworkCount
          break
        case '迟到':
          v.num = data.lateCount
          break
        case '早退':
          v.num = data.earlyLeaveCount
          break
        case '缺卡':
          v.num = data.missingCardCount
          break
        case '旷工':
          v.num = data.absentCount
          break
        case '加班':
          v.num = data.overtimeCount
          break
        case '请假':
          v.num = data.leaveCount
          break
        case '出勤':
          v.num = data.attendanceCount
          break
      }
    })
  }
}
const groupId = ref(1)
const changeMonth = (val) => {
  let emit = {
    punchTimeLte: dayjs(val).startOf('month').format('YYYY-MM-DD 00:00:00'),
    punchTimeGte: dayjs(val).endOf('month').format('YYYY-MM-DD 23:59:59'),
  }
  getListYiChangApiFn(emit)
}
const getListYiChangApiFn = async (emit = {}) => {
  let params = {
    punchTimeLte: emit?.punchTimeLte || dayjs(time.value.startDate).format('YYYY-MM-DD 00:00:00'),
    punchTimeGte: emit?.punchTimeGte || dayjs(time.value.endDate).format('YYYY-MM-DD 23:59:59'),
    userId: userInfo.value.userId,
  }
  let { code, data } = await getListYiChangApi(params)
  if (code === 200) {
    markDays.value = data
  }
}
onLoad((props) => {
  userInfo.value = JSON.parse(decodeURIComponent(props?.data))
  time.value = JSON.parse(decodeURIComponent(props?.time))
  groupId.value = Number(props?.groupId)
  getStatisticsFn(userInfo.value.userId)
  getListYiChangApiFn()
})
</script>

<template>
  <HeaderNavTabarVue
    iconFont="icon-cuowuguanbiquxiao"
    :title="userInfo.nickName + '的统计'"
    @rightIcon="rightIcon"
  />
  <view class="personal-box">
    <view class="top-center">
      <view class="header-date">
        <text class="left-txt"
          >{{ dayjs(time?.startDate).format('YYYY年MM月DD日') }} -
          {{ dayjs(time?.endDate).format('YYYY年MM月DD日') }}
        </text>
<!--        <text class="right-txt" @tap="monthlyStatisticsFn">-->
<!--          更多-->
<!--          <i class="iconfont icon-youjiantou"></i>-->
<!--        </text>-->
      </view>
      <view class="content-personal">
        <view class="personal-list-cell" v-for="(item, index) in personalContent" :key="index">
          <text class="num" :class="item.title">{{ item.num }}</text>
          <text class="title-detail">{{ item.title }}</text>
        </view>
      </view>
    </view>

    <view class="content">
      <ren-calendar
        ref="ren"
        :markDays="markDays"
        :open="true"
        @onDayClick="onDayClick"
        @changeMonth="changeMonth"
        :disabledAfter="true"
        :year="dayjs(time?.startDate).format('YYYY')"
        :month="dayjs(time?.startDate).format('MM')"
      ></ren-calendar>
    </view>
    <StepsContainer
      :userInfo="userInfo"
      :startDate="time?.startDate"
      :endDate="time?.endDate"
      :renCalendarCurDate="curDate"
    />
  </view>
</template>

<style scoped lang="scss">
@import '@/static/style/index.scss';

.personal-box {
  .top-center {
    background: #fff;
    padding: 24rpx 32rpx;
    box-shadow: 0 4rpx 16rpx 0 #0000000d;

    .header-date {
      @include flex($align: center, $justify: space-between);

      .left-txt {
        color: #1d2129;
        font-size: 32rpx;
        font-weight: 500;
      }

      .right-txt {
        color: #86909c;
        font-size: 28rpx;
        font-weight: 400;
      }
    }

    .content-personal {
      display: flex;
      margin: 32rpx 0;
      @include flex($align: center, $justify: space-between);
      padding: 32rpx 40rpx;
      border-radius: 24rpx;
      background: #f7f8fa;

      .personal-list-cell {
        @include flex($align: center, $flex-column: column);

        .出勤天数 {
          color: #1d2129;
        }

        .迟到,
        .早退,
        .缺卡 {
          color: #f53f3f;
        }

        .num {
          text-align: center;
          font-size: 40rpx;
          font-style: normal;
          font-weight: 500;
          display: inline-block;
          margin-bottom: 8rpx;
        }

        .title-detail {
          color: #86909c;
          text-align: center;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
